import {
  Button,
  Col,
  Form,
  FormItem,
  InputNumber,
  message,
  Modal,
  Row,
  Spin
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { xhImformationApi } from '@/apis'
import { OrderDetailItem } from '@/apis/orderTypes'
import { BaseInfoDetail } from '@/apis/riverTypes'
import { useBack } from '@/hooks/useBack'
import { formatDate } from '@/utils'

export default defineComponent({
  name: 'InformationDetail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const data = ref({} as BaseInfoDetail)
    const optionItemCur = ref({} as OrderDetailItem)
    const loading = ref(false)
    onMounted(() => {
      orderDetail()
    })
    async function orderDetail() {
      try {
        loading.value = true
        data.value = await xhImformationApi.getDetail(route.query.id)
      } finally {
        loading.value = false
      }
    }
    const { handleCancel } = useBack('refreshFormationList')
    //返回列表
    function back() {
      handleCancel()
    }
    return {
      data,
      loading,
      back
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Form>
          <Row
            type="flex"
            style={{
              marginTop: '10px',
              marginLeft: '30px',
              borderBottom: '1px solid 	#F5F5F5'
            }}
          >
            <Col span={5}>
              <FormItem label="基本账号姓名：">
                {this.data.accountName}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="基本账号ID：">{this.data.id}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="登录手机号：">{this.data.mobile}</FormItem>
            </Col>
            <Col span={8}>
              <FormItem label="上级姓名：">{this.data.parentName}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="战队：">{this.data.combatTeam}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="服务商星级：">
                {
                  ['暂无', '一星', '二星', '三星', '四星', '五星'][
                    this.data.serviceProviderLevel
                  ]
                }
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="职位：">
                {
                  [
                    '暂无',
                    '群主',
                    '副群主',
                    '预备群主',
                    '预备副群主',
                    '考核预备群主',
                    '考核预备副群主'
                  ][this.data.positionLevel]
                }
              </FormItem>
            </Col>
          </Row>
          <Row
            type="flex"
            style={{
              marginTop: '10px',
              marginLeft: '30px',
              borderBottom: '1px solid 	#F5F5F5'
            }}
          >
            <Col span={5}>
              <FormItem label="销售公司名称：">{this.data.funame}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="销售公司状态：">
                {
                  ['开通中', '已开通', '已停业', '已停业'][
                    this.data.salesCompanStatus
                  ]
                }
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="销售公司社会信用代码：">
                {this.data.shopLic}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem label="销售公司ID：">{this.data.wid}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="销售公司简称：">
                {this.data.companyShortname}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="销售公司注册地址：">
                {this.data.registerAddress}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="销售公司对公户：">
                {this.data.bankAccountNo}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="销售公司开户银行：">
                {this.data.salesCompanBankBranchName}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="销售公司法人：">
                {this.data.salesCompanAccountName}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="销售公司法人电话：">{this.data.phone}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="销售公司系统领导人ID：">
                {this.data.salesCompanLeaderId}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="销售公司领导人姓名：">
                {this.data.salesCompanLeaderName}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="销售公司领导人手机号：">
                {this.data.salesCompanLeaderMobile}
              </FormItem>
            </Col>
          </Row>
          <Row
            type="flex"
            style={{
              marginTop: '10px',
              marginLeft: '30px'
            }}
          >
            <Col span={5}>
              <FormItem label="是否超名额：">
                {this.data.overquotaOrNot}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="群号：">{this.data.groupNumber}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="总裁星级：">
                {
                  ['暂无', '一星', '二星', '三星', '四星', '五星'][
                    this.data.presidentStarRating
                  ]
                }
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem label="服务商类型：">
                {['暂无', '预备', '正式'][this.data.serviceProviderType]}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="管理销售公司数量：">
                {this.data.manageSalesCompanCount}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="服务商资料ID：">
                {this.data.serviceProviderId}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="申请人联系电话：">
                {this.data.applicantMobile}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="公司名称：">{this.data.corporateName}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="统一社会信用代码：">
                {this.data.licenseNumber}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="法人代表：">{this.data.legalPerson}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="银行开户支行：">{this.data.bankName}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="银行账号：">{this.data.accountNumber}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="身份证号：">{this.data.idCardNumber}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="提交申请时间">
                <span>{formatDate(this.data.subjectTime)}</span>
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="状态：">
                {['待审核', '审核通过', '驳回'][this.data.auditStatus]}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="备注1：">{this.data.memoOne}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="备注2：">{this.data.memoTwo}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="备注3：">{this.data.memoThree}</FormItem>
            </Col>
            <Col span={5}>
              <Button
                style={{ width: '200px', marginTop: '50px' }}
                onClick={() => this.back()}
              >
                返回列表
              </Button>
            </Col>
          </Row>
        </Form>
      </Spin>
    )
  }
})
